<template>
    <el-main>
        <el-form :inline="true" size="small">
            <el-form-item>
                <el-button type="primary" :icon="Plus" @click="addBtn">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData.list" border stripe :height="tableHeight" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="label" label="菜单名称" />
            <el-table-column prop="icon" label="菜单类型">
                <template #default="scope">
                    <el-tag v-if="scope.row.type === '0'">目录</el-tag>
                    <el-tag v-else-if="scope.row.type === '1'" type="success">菜单</el-tag>
                    <el-tag v-else type="danger">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="icon" label="图标">
                <template #default="scope">
                    <component class="icons" v-if="scope.row.icon" :is="scope.row.icon" />
                    <!-- <Icon class="icons" :icon="scope.row.icon"></Icon> -->
                </template>
            </el-table-column>
            <el-table-column prop="name" label="路由名称" />
            <el-table-column prop="path" label="路由地址" />
            <el-table-column prop="code" label="权限字段" />
            <el-table-column prop="url" label="组件路径" />
            <el-table-column fixed="right" label="操作" align="center" width="180">
                <template #default="scope">
                    <el-button size="small" type="primary" :icon="Edit" @click="editBtn(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" :icon="Delete" @click="deleteBtn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-main>
    <add-menu ref="addRef" @save="save"></add-menu>
</template>
<script setup lang='ts'>
import { ref,reactive, onMounted, nextTick } from 'vue'
import tableList from '@/composables/menu/tableList';
import tableCurd from '@/composables/menu/tableCurd'
import { Plus, Search, Refresh, Edit, Delete, Setting } from '@element-plus/icons-vue'
import addMenu from './addMenu.vue';

// 表格的高度
const tableHeight = ref(0)

const { tableData,listQuery,getList } = tableList()

const { addBtn, editBtn, deleteBtn, save, addRef } = tableCurd(getList)

onMounted(() => {
    nextTick(() => {
        tableHeight.value = window.innerHeight - 200
    })
})
</script>
<style scoped lang='scss'>
.icons {
  width: 24px;
  height: 18px;
}
</style>